<template>
	<view class="page flex-col">
		<image @click="listenerActionSheet" class="shareImg" src="../../static/com/icon_fx.png" mode=""></image>
		<view class="group_1 flex-col">
			<view class="block_5 flex-col ">
				<swiper class="swiper" :indicator-dots="true" indicator-active-color="#fff" :autoplay="true"
					:interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in dataInfo.sliderImage">
						<image :src="item" mode=""></image>
					</swiper-item>

				</swiper>
			</view>

			<view class="block_6 flex-col">
				<view class="block_7 ">
					<text class="text_8">{{dataInfo.hotelName}}</text>
					<view class="block_8 flex-row">
						<view class="text-wrapper_1 flex-col" v-for="(item,index) in dataInfo.tags" :key="index">
							<text class="text_9">{{item}}</text>
						</view>

					</view>
				</view>

				<view class="block_10 ">
					<view class="section_3 flex-row" style="">
						<view class="image-text_1 flex-row " style="">
							<image class="label_1" src="@/static/pagesA/icon_dw.png" mode="scaleToFill"></image>
							<text class="text-group_1">地址:</text>
						</view>
						<view class="flex-row" style=" align-items: center;width: 80%;" @click="openLocation()">
							<view class="text_12">{{dataInfo.address}}</view>

							<image class="label_15" src="@/static/pagesA/icon_dh.png" mode="scaleToFill"></image>
						</view>

					</view>
					<view class="section_3 flex-row ">
						<view class="image-text_1 flex-row ">
							<view class="dis" style="align-items: center;width: 160rpx;">
								<image class="label_1" src="../../static/com/icon_lxfs.png" mode="scaleToFill"></image>

								<!-- <image class="label_1" src="@/static/pagesA/icon_dt.png" mode=""></image> -->
								<text class="text-group_1">联系方式:</text>
							</view>
							<view></view>

						</view>
						<text class="text_12" @click="call(dataInfo.phone)">{{dataInfo.phone}}</text>
					</view>
				</view>

				<div class="block_11 flex-col"></div>
				<!-- <view class="block_12 flex-row">
					<text @click="onShowDatePicker('range')">
						{{range[0]}} <text class="rzatag">入住</text> - {{range[1]}} <text class="rzatag">退房</text>

						<text>共{{totolDay}}天</text>
					</text>

					<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'"
						:end-text="'离店'" :show-seconds="true" @confirm="ed" @cancel="ed" />

				</view> -->
				<view class="block_13 flex-row" @click="lookMore(2,item)" v-for="(item,index) in dataInfo.roomList"
					:key="index">
					<image class="image_3" :src="item.image" mode=""></image>

					<view class="group_4 flex-col">
						<view class="box_6  flex-row justify-between">
							<view class="text_18 line2">{{item.name}}→</view>
							<!-- <div class="block_14 flex-col"></div> -->
						</view>
						<view class="box_7 flex-row">
							<view class="text-wrapper_6 flex-col" v-for="(items,index) in item.tags" :key="index">
								{{items}}
							</view>

						</view>
						<view class="text-wrapper_7 flex-row justify-between">
							<view><text class="text_21">¥</text>
								<text class="text_22">{{item.price}}</text>
							</view>
							<view class="text-wrapper_8 flex-col">
								预定
							</view>
						</view>
					</view>
					<!-- <view class="text-wrapper_8 flex-col">
						
					</view> -->
				</view>


				<!-- 	<view class="block_18 flex-col">
					<view class=" flex-row">
						<text class="text_30">入离时间:14:00以后入住,12:00以前退房</text>
					</view>
					<view class=" flex-row justify-between" style="margin: 20rpx 0;">
						<view class="">配套设施</view>
						<view class="dis" style="align-items: center;" @click="lookMore(1)">查看全部
							<image style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"
								src="@/static/com/icon_more.png" mode=""></image>

						</view>

					</view>
					<view class="group_7 flex-row" v-for="(item,index) in 3">
						<text class="text_33">基础</text>
						<view class="dis" style="flex-wrap: wrap;">
							<view class="image-text_2 flex-row justify-between" v-for="(item,index) in 7">
								<text class='iconfont icon-xuanzhong'></text>
								<text class="text-group_2">无线网</text>
							</view>

						</view>


					</view>
				</view> -->

			</view>
			<view class="block_20 flex-col">
				<text class="text_36">房屋介绍</text>
				<jyf-parser :html="dataInfo.info" ref="article" :tag-style="tagStyle"></jyf-parser>

			</view>
		</view>
		<uni-popup ref="lookMorePup" type="bottom">
			<view class="safeguardPup-wrap">

				<view class="safeguardPup-head safeguardPup-head1 dis" v-if="islookMorePup!=2">
					<view class="">

					</view>
					<view class="safeguardPup-head-center"></view>
					<view class="safeguardPup-head-right" @click="this.$refs.lookMorePup.close()">
						<image src="@/static/com/icon_close.png" mode=""></image>
					</view>
				</view>
				<view class="safeguardPup-msg ">
					<template v-if="islookMorePup==2">
						<view class="safeguardPup-msg-img flex-col ">
							<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
								<swiper-item v-for="(item,index) in roomMsg.slideImage">
									<!-- <image src="../../static/logo.png" mode=""></image> -->
									<image :src="item" mode=""></image>
								</swiper-item>

							</swiper>
							<!--  -->
						</view>
						<view class="block_7 ">
							<text class="text_8">{{roomMsg.roomName}}</text>
							<view class="block_8 flex-row">
								<view class="text-wrapper_1 flex-col" v-for="(item,index) in roomMsg.tags" :key="index">
									<text class="text_9">{{item}}</text>
								</view>
								<!-- <view class="text-wrapper_2 flex-col">
									<text class="text_10">空调</text>
								</view>
								<view class="text-wrapper_3 flex-col">
									<text class="text_11">500平</text>
								</view> -->
							</view>
						</view>
					</template>
					<view class="ptsstit">
						配套设施
					</view>
					<view class="group_7 flex-row" v-for="(item,index) in roomMsg.roomConfig">
						<view class="text_33">{{item.tit}}</view>
						<view class="dis" style="flex-wrap: wrap;    width: 80%;">
							<view class="image-text_2 flex-row justify-between" v-for="(items,index) in item.list">
								<text class='iconfont icon-xuanzhong' style="color: #46B681;margin-right: 6rpx;"></text>
								<text class="text-group_2">{{items}}</text>
							</view>

						</view>


					</view>
					<view class="des" v-if="islookMorePup==2">

						入离时间:{{dataInfo.checkinTime||'未确定'}}以后入住,{{dataInfo.checkoutTime||'未确定'}}以前退房
					</view>
				</view>
				<view class="ding">

				</view>
				<view class="footer dis" v-if="islookMorePup==2">
					<view class="">
						合计：
						<text style="color: $maincolor;">￥{{roomMsg.price}}</text>
					</view>
					<view class="footer-btn" @click="goPage">
						立即预定
					</view>
				</view>
			</view>

		</uni-popup>
		<uni-popup ref="safeguardPup" type="bottom">
		
			<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
		
				<button class="item" open-type="share" hover-class='none' @click="goFriend">
					<view class="iconfont icon-weixin3"></view>
					<view class="">发送给朋友</view>
				</button>
		
				<button class="item" hover-class='none' @tap="sharePoster">
					<view class="iconfont icon-haibao"></view>
					<view class="">生成海报</view>
				</button>
			</view>
		</uni-popup>
		<qrcode-poster @saveImgeOK="saveImgeOK" ref="poster" :title="dataInfo.hotelName" des=" "
			:headerImg="dataInfo.sliderImage[0]" subTitle=' '></qrcode-poster>
		<home></home>
	</view>
</template>
<script>
	import QrcodePoster from '@/components/com/poster.vue'
	import home from '@/components/home/index.vue'
	import moment from 'moment'
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		getApplyHotelInfo,
		getApplyHotelRoomInfo,
		getApplyHotelPreOrder
	} from '@/api/togeterRich/index.js'
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker,
			"jyf-parser": parser,
			home,
			QrcodePoster
		},
		data() {
			return {
				totolDay: '',
				roomMsg: {},
				dataInfo: {},
				id: '',
				islookMorePup: 0,
				showPicker: false,

				range: [],

				type: 'rangetime',
				value: '',
				constants: {

				},
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getDate()
			this.init()
		},
		methods: {
			saveImgeOK(){
				this.$refs.safeguardPup.close()
				// this.posters = false;
			},
			sharePoster() {
				//获取带参数二维码并传递
				this.is_show_model = false
				this.$refs.poster.showCanvas()
			},
			listenerActionSheet: function() {
				if (this.isLogin === false) {
					toLogin();
				} else {
					// #ifdef H5
					if (!this.imgTop) this.getImageBase64(this.storeImage);
					if (this.$wechat.isWeixin() === true) {
						this.weixinStatus = true;
					}
					// #endif
					this.$refs.safeguardPup.open()
					// this.posters = true;
			
				}
			},
			getDate() {
				var date = new Date();
				var year = date.getFullYear();

				var month = date.getMonth() + 1;

				var day = date.getDate();
				var yesterday = date.getDate() + 1
				console.log(day, 'fdd')
				console.log(yesterday)
				month = (month > 9) ? month : ("0" + month)
				day = (day < 10) ? ("0" + day) : day;
				yesterday = (yesterday < 10) ? ("0" + yesterday) : yesterday;
				var today = year + "-" + month + "-" + day;
				var yesterdays = year + "-" + month + "-" + yesterday;
				this.range.push(today, yesterdays)
				this.totolDate()
				// console.log(today, yesterdays)
			},
			totolDate() {
				const start = moment(this.range[0]);
				const end = moment(this.range[1]);
				const days = end.diff(start, 'days');
				// totolDate
				this.totolDay = days
				console.log(days, '几天能算出来？')
			},
			init() {
				getApplyHotelInfo(this.id).then(res => {
					console.log(res, 'kjkk')
					this.dataInfo = res.data
				})
			},
			goPage() {
				console.log(this.range, 'sdss')
				let data = {
					userCheckinTime: this.range[0],
					userCheckoutTime: this.range[1],
					hotelId: this.dataInfo.id,
					productNum: 1,
					roomId: this.roomMsg.id,
				}
				console.log(data, 'gggg')
				// uni.navigateTo({
				// 	url: `/pagesA/BeautifulEconomy/homestayPay?id=${this.id}&range=${this.range}`
				// })
				// return;
				getApplyHotelPreOrder(data).then(res => {
					uni.navigateTo({
						url: `/pagesA/BeautifulEconomy/homestayPay?id=${this.id}&rid=${this.roomMsg.id}&range=${this.range}&preOrderNo=${res.data.preOrderNo}`
					})
				})

			},
			lookMore(type, item) {
				getApplyHotelRoomInfo(item.id).then(res => {
					this.roomMsg = res.data
				})
				this.islookMorePup = type

				this.$refs.lookMorePup.open()
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			openLocation() {

				uni.openLocation({
					latitude: Number(this.dataInfo.latitude), // 目标纬度
					longitude: Number(this.dataInfo.longitude), // 目标经度
					name: this.dataInfo.address,
					address: this.dataInfo.address,
					success: function() {
						console.log('打开地图导航成功');
					},
					fail: function(err) {
						console.log('打开地图导航失败', err);
					}
				});
			},
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];

			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					console.log(e, 'eee')
					this[this.type] = e.value;
					this.totolDate()

				}
			}
		},
	};
</script>
<style lang="scss" scoped>
	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 1000;
		padding: 30rpx 0;
		align-items: center;
		justify-content: space-around;

		.footer-btn {

			font-size: 28rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			background: $maincolor;
			text-align: center;
			color: #fff;
			padding: 0 100rpx;
		}
	}

	.safeguardPup-wrap {
		.des {
			font-size: 28rpx;
			color: #999;
		}

		.ptsstit {
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
			text-align: left;
		}

		.safeguardPup-head1 {
			justify-content: space-between;
			padding: 36rpx 36rpx 0 36rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.safeguardPup-msg {
			width: 90%;
			margin: 30rpx auto;
			justify-content: space-between;
			font-size: 28rpx;
			flex-direction: column;

			.safeguardPup-msg-img {
				width: 100%;
				height: 344rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		width: 100%;
		height: 800rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow-y: scroll;
	}

	.swiper {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	@import '@/pagesA/BeautifulEconomy/com/homstayInfo.css';

	@import '@/com/css/common.css';
</style>